<template>
    <div>
        <el-dialog :title="option.title" :visible.sync="showDialog"
                   :before-close="close"
                   :close-on-press-escape="false" :close-on-click-modal="false"
                   style="margin-bottom: 10px;">
            <el-form :model="data" :rules="mRules" ref="form" label-width="120px"
                     style="margin-left: 30px;margin-right: 60px;">
                <el-form-item label="岗位名称" prop="jobName">
                    <el-autocomplete
                            placeholder="岗位名称"
                            style="width: 60%"
                            class="inline-input"
                            v-model="data.jobName"
                            :fetch-suggestions="querySearch"
                            @select="handleSelect">
                        <template slot-scope="{ item }">
                            {{ item }}
                        </template>
                    </el-autocomplete>
                </el-form-item>
                <el-form-item label="行业类别:" prop="industryH">
                    <el-cascader
                            :checkStrictly="true"
                            style="width: 60%"
                            v-model="data.industryH" :options="industryList"
                            :props="{value: 'id', label: 'name'}"
                            :show-all-levels="false"/>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select clearable style="width: 60%" v-model="data.sex" placeholder="请选择">
                        <el-option
                                v-for="item in sex"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年龄段" prop="peopleAge">
                    <el-select clearable style="width: 60%" v-model="data.peopleAge" placeholder="请选择">
                        <el-option
                                v-for="item in peopleAge"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学历" prop="learnLevel">
                    <el-select clearable style="width: 60%" v-model="data.learnLevel" placeholder="请选择">
                        <el-option
                                v-for="item in learnLevel"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="招聘人数" prop="lackCount" :show-message="true">
                    <el-input-number style="width: 60%" v-model="data.lackCount" :step="1" :min="0" placeholder="缺工人数"/>
                </el-form-item>
                <el-form-item label="意向人数" prop="intentionCount">
                    <el-input-number style="width: 60%" v-model="data.intentionCount" :step="1" :min="0"
                                     placeholder="意向人数"/>
                </el-form-item>
                <el-form-item label="成功人数" prop="recruitCount">
                    <el-input-number style="width: 60%" v-model="data.recruitCount" :step="1" :min="0"
                                     placeholder="成功人数"/>
                </el-form-item>
                <el-form-item label="专业" prop="profession">
                    <el-input clearable v-model="data.profession" placeholder="专业"/>
                </el-form-item>
                <el-form-item label="经验要求" prop="experience">
                    <el-input clearable v-model="data.experience" placeholder="经验要求"/>
                </el-form-item>
                <el-form-item label="月薪范围" prop="monthSalary">
                    <el-input clearable v-model="data.monthSalary" placeholder="月薪范围"/>
                </el-form-item>
                <el-form-item label="其他待遇及条件" prop="other">
                    <el-input
                            type="textarea"
                            placeholder="请输入内容"
                            v-model="data.other"
                            show-word-limit>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!--添加按钮-->
                <el-button size="medium" @click="close">取 消
                </el-button>
                <el-button type="primary" plain size="medium" @click="insertOrUpdate()">确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import {Component, Emit, Prop} from 'vue-property-decorator'
    import {ElForm} from "element-ui/types/form";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import {errorMsg, successMsg} from "@/core/utils/message";
    import {rule} from "@/core/utils/rule";
    import Kit from "@/core/mixin/Kit";
    import {getStorage} from "@/core/utils/storage";
    import $http from "@/core/utils/http";
    import {API} from "@/core/api/API";
    import {copy, tree} from "@/core/utils/Utils";

    //添加企业账号
    @Component({
        name: 'AddJob',
        components: {},
    })
    export default class AddJob extends mixins(BaseVue, Kit) {
        @Prop({default: {}}) data!: any;
        @Prop({default: {type: 'insert', title: '添加'}}) option!: any;
        showDialog = true;
        //行业类别
        industryList: any = [];


        mRules = {
            jobName: [rule.notNullBlur(), rule.notNullChange()],
            industryH: [rule.notNullChange()],
            sex: [rule.notNullChange()],
            peopleAge: [rule.notNullChange()],
            learnLevel: [rule.notNullChange()],
            peopleCount: [rule.notNullBlur()],
            lackCount: [rule.notNullBlur()],
            intentionCount: [rule.notNullBlur()],
            recruitCount: [rule.notNullBlur()],
            profession: [rule.notNullBlur()],
            experience: [rule.notNullBlur()],
            monthSalary: [rule.notNullBlur()],
            other: [rule.notNullBlur()],
        };

        //初始化
        async mounted() {
            this.data = copy(this.data);
            if (this.data.industryH && typeof this.data.industryH == "string") {
                this.data.industryH = JSON.parse(this.data.industryH);
            }
            await this.getIndustryTypeList();
            this.getAllJobs();
        }


        //匹配结果列表
        allJobs: Array<any> = [];

        querySearch(queryString: any, cb: any) {
            // 调用 callback 返回建议列表的数据
            if (queryString) {
                let filter = this.allJobs.filter((restaurant: any) => {
                    return (restaurant.toString().toLowerCase().indexOf(queryString.toLowerCase()) != -1);
                });
                cb(filter);
                return
            }
            cb(this.allJobs);
        }

        //读取全部
        getAllJobs() {
            $http.post(API.recruitAlJobNames, {companyId: this.data.companyId}).then((res: any) => {
                if (res.success) {
                    if (res.data && res.data.jobS) {
                        this.allJobs = res.data.jobS.split(",");
                        ////console.log(this.allJobs)
                        ////console.log(typeof this.allJobs)
                    }
                }
            });
        }

        handleSelect(item: any) {
            this.data.jobName = item;
            // (this.$refs.form as ElForm).validate();
        }

        // 获取行业类型数据
        async getIndustryTypeList() {
            return $http.post(API.industryTypeList, {}).then((res: any) => {
                if (res.success) {
                    this.industryList = tree(res.data);
                } else {
                    errorMsg("行业类型数据获取失败");
                }
                return "";
            });
        }


        //性别
        sex = ["男", "女"];
        //年龄段
        peopleAge = getStorage("peopleAge");
        //学历
        learnLevel = getStorage("learnLevel");

        //关闭时是否刷新分页
        backRefresh: boolean = false;
        //全部角色
        roles: any = [];

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }

        //添加
        insertOrUpdate() {
            (this.$refs.form as ElForm).validate().then(() => {
                // this.form.companyId = this.companyInfo.id;
                // this.form.tableData = this.tableData;
                //////console.log(this.data);
                let param = copy(this.data);
                param.industry = this.data.industryH[1];
                //只有一级分类
                if (!param.industry) {
                    param.industry = this.data.industryH[0];
                }

                $http.post(API.recruitInsertOrUpdate, param).then((res: any) => {
                    if (res.success) {
                        this.backRefresh = true;
                        successMsg("操作成功");
                        this.close()
                    }
                });

            },).catch(() => {
                errorMsg("表单内容填写错误，请检查！");
            });
        }


        //关闭事件
        @Emit("close")
        close() {
            this.showDialog = false;
            return {refresh: this.backRefresh, data: this.data, type: this.option.type, index: this.option.index};
        }
    }


</script>

<style scoped lang="scss">

</style>
